<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="更新角色">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="13">
            <el-form-item label="角色名" size="mini" prop="name">
              <el-input v-model="form.name" name="name">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="13">
            <el-form-item label="角色别名" size="mini" prop="alias">
              <el-input v-model="form.alias" name="alias">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="13">
            <el-form-item label="排序号" size="mini" prop="sortNum">
              <el-input-number v-model="form.sortNum" name="sortNum" type="textarea" :min="0" :max="100">
              </el-input-number>
            </el-form-item>

          </el-col>
          <el-col :span="13">
            <el-form-item label="角色描述" size="mini" prop="description">
              <el-input v-model="form.description" name="description" type="textarea"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="13">
            <el-form-item label="权限" size="mini">
              <el-tree @check="checkPermission" :data="treeData" ref="tree" check-strictly show-checkbox
                node-key="permission" :default-checked-keys="form.authorities">
              </el-tree>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
            <el-button @click="goBack">取消</el-button>
            <el-button type="primary" @click="updateData">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";

  export default {
    name: "dishgroup_add",
    mixins: [common],
    data() {
      return {
        form: {
          name: '',
          alias: '',
          sortNum: '',
          description: ''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入角色名',
            trigger: 'blur'
          }],
        },
        treeData: []
      };
    },
    methods: {

      checkPermission(checkedNode, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
        //this.handleCheck(checkedNode, checkedKeys, this.$refs.treeApiScope);
        var refDom = this.$refs.tree;
        var permissionKeys = checkedKeys.checkedKeys;
        //parentPermission
        if (checkedNode.parent) {

          const children = [];
          if (checkedNode.children) {
            var length = checkedNode.children.length;
            for (let index = 0; index < length; index++) {
              const element = checkedNode.children[index];
              children.push(element.permission);
            }
            //children=checkedNode.children.map(item=>item.permission);
          }

          //选中了
          if (permissionKeys.indexOf(checkedNode.permission) != -1) {
            //勾选了a
            if (checkedNode.parentPermission) {
              permissionKeys.push(checkedNode.parentPermission);
            }

            //设置下一级
            if (checkedNode.children) {
              permissionKeys = permissionKeys.concat(children);
            }

            //const tempArr = Array.from(new Set(checkedKeys.concat(children)));
            refDom.setCheckedKeys(permissionKeys);
          } else {
            // let checkedKeysSet = new Set(permissionKeys);
            var childrenSet = new Set(children);
            var permissionKeys = permissionKeys.filter(ele => !childrenSet.has(ele));
            refDom.setCheckedKeys(permissionKeys);
          }
        }

        this.form.authorities = permissionKeys;
      },
      updateData() {
        var self = this;
        this.$refs["ruleForm"].validate(function (valid) {
          if (valid) {
            self.updateDataWork();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      updateDataWork() {
        var self = this,
          data = this.form;
        if (this.deforeAddData) {
          this.deforeAddData();
        }
        this.postJsonData("/tenantRest/tenantuserrole/updateJson.htm", data, function () {
          self.$message({
            message: "更新数据成功",
            type: "success",
          });
          self.$router.go(-1);
        });
      },
    },
    mounted() {
      var id = this.$route.query.id;
      var self = this;
      var data = {};
      data.id = id;

      this.$HTTP.form("/tenantRest/tenantuserrole/view.htm", data).then((res) => {
        if (res.code == 0) {
          self.form = res;
        }
      });

      var params = {};
      params.size = 100;
      params.level = 2;
      params.fetch = 1;
      params.sortField = "sortNum";
      params.sortMethod = "asc";

      this.postData("/tenantRest/tenantmenu/list.htm", params, function (res) {
        if (res.code == 0) {
          self.treeData = res.list;
        }
      });
    },
  };
</script>

<style>
</style>